<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
	<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>员工列表</title>
<%
	pageContext.setAttribute("APP_PATH", request.getContextPath());
%>
<script type="text/javascript"
	src="${APP_PATH }/static/js/jquery-3.4.1.min.js"></script>
<link
	href="${APP_PATH }/static/bootstrap-3.3.7-dist/css/bootstrap.min.css"
	rel="stylesheet">
<script
	src="${APP_PATH }/static/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
</head>
<body>
	<!-- 搭建显示页面 -->
	<div class="container">
		<!-- 标题 -->
		<div class="row">
			<div class="col-md-12">
				<h1>陈园--CRUD</h1>
			</div>
		</div>
		<!-- 按钮 -->
		<div class="row">
			<div class="col-md-4 col-md-offset-8">
				<button class="btn btn-primary">新增</button>
				<button class="btn btn-danger">删除</button>
			</div>
		</div>
		<!-- 显示表格数据 -->
		<div class="row">
			<div class="col-md-12">
				<table class="table table-hover">
					<tr>
						<th>#</th>
						<th>用户名</th>
						<th>性别</th>
						<th>邮箱</th>
						<th>部门</th>
						<th>操作</th>
					</tr>
					<c:forEach items="${PageInfo.list }" var="emp">
					<tr>
						<th>${emp.empId }</th>
						<th>${emp.empName }</th>
						<th>${emp.gender=="M"?"男":"女" }</th>
						<th>${emp.emil }</th>
						<th>${emp.department.deptName }</th>
						<th>
							<button class="btn btn-info btn-sm">
								<span class="glyphicon glyphicon-pencil" aria-hidden="true">
									编辑 </span>
							</button>
							<button class="btn btn-danger btn-sm">
								<span class="glyphicon glyphicon-trash" aria-hidden="true">
									删除 </span>
							</button>
						</th>
					</tr>
					</c:forEach>
				</table>
			</div>

		</div>
		<!-- 显示分页信息 -->
		<div class="row">
			<!-- 分页信息 -->
			<div class="col-md-6">
				当前第${PageInfo.pageNum }页，共${PageInfo.pages }页,共有${PageInfo.total }条记录
			</div>
			<!-- 分页条信息 -->
			<div class="col-md-6">
				<nav aria-label="Page navigation">
					<ul class="pagination">
						<li>
							<a href="${APP_PATH }/emps?pn=1">首页</a>
						</li>
						<c:if test="${PageInfo.hasPreviousPage }">
							<li><a href="${APP_PATH }/emps?pn=${PageInfo.pageNum-1 }" aria-label="Previous"> <span
								aria-hidden="true">&laquo;</span>
								</a>
							</li>
						</c:if>
							<c:forEach items="${PageInfo.navigatepageNums }" var="page_Num">
							<c:if test="${page_Num == PageInfo.pageNum }">
								<li class="active"><a href="#">${page_Num }</a></li>
							</c:if>
							<c:if test="${page_Num != PageInfo.pageNum }">
								<li><a href="${APP_PATH }/emps?pn=${page_Num }">${page_Num }</a></li>
							</c:if>
							</c:forEach>
							<c:if test="${PageInfo.hasNextPage }">
								<li>
									<a href="${APP_PATH }/emps?pn=${PageInfo.pageNum+1 }" aria-label="Next"> <span
									aria-hidden="true">&raquo;</span>
									</a>
								</li>
							</c:if>
						<li>
							<a href="${APP_PATH }/emps?pn=${PageInfo.pages }">末页</a>
						</li>
					</ul>
				</nav>
			</div>
		</div>
	</div>
</body>
</html>